<template>
  <div class="forgotpwd_container">
    <!-- 背景图片 -->
    <div class="img_bg"></div>
    <div class="title">基于区块链的数字版权保护系统</div>
    <div class="forgotpwd_box">
      <h1>忘记密码？</h1>
      <p>出于安全考虑，我们将验证您的身份。<br>请输入您注册时使用的电子邮件地址。</p>
      <!-- 邮箱验证表单 -->
      <el-form :model="form" ref="form" label-width="0px" class="forgotpwd_form">
        <!-- 邮箱 -->
        <el-row>
          <el-form-item prop="userMail"
          :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
                   { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"
          >
            <el-input placeholder="请输入绑定邮箱" v-model="form.userMail"></el-input>
          </el-form-item>
        </el-row>
        <!-- 验证码 -->
        <el-row :gutter="38">
          <el-col :span="16">
            <el-form-item>
              <el-input placeholder="请输入收到的验证码" v-model="form.userCheck"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <!--需要后期加上一分钟发送一次验证码-->
              <el-button :disabled="dis" @click="getCode">
                <template v-if="sending">获取验证码</template>
                <template v-else>{{second}}秒后重发</template>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-form-item class="btn_nextStep">
          <el-button @click="toNextStep()" type="primary" style="width:200px">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForgotPassword',
  data () {
    return {
      form: {
        userMail: '',
        userCheck: ''
      },
      tip: '获取验证码',
      dis: false,
      sending: true,
      second: 60,
      id: ''
    }
  },
  methods: {
    timeDown () {
      const result = setInterval(() => {
        --this.second
        if (this.second < 0) {
          clearInterval(result)
          this.sending = true
          this.dis = false
          this.second = 60
        }
      }, 1000)
    },
    // 获取验证码
    getCode () {
      if (this.form.userMail !== '') {
        this.dis = true
        this.sending = false
        this.timeDown()
        console.log(this.dis)
        this.$axios({
          methods: 'post',
          url: '/user/getCode',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userMail: this.form.userMail,
            tag: false
          }
        }).then((response) => {
          console.log(response)
          if (response.data.data[0] === false) {
            alert(response.data.msg)
          } else {
            this.$message({
              type: 'success',
              message: '已发送'
            })
          }
        }).catch(function (error) { console.log(error) })
      } else {
        alert('邮箱不能为空')
      }
    },
    toNextStep () {
      // 需要从后台获取验证码数据加个判断是否一致，插旗
      // 好像应该带参数把邮箱一起传过去，插旗
      if (this.form.userMail !== '' && this.form.userCheck !== '') {
        this.$axios({
          methods: 'post',
          url: '/user/mailCheck',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userMail: this.form.userMail,
            userCheck: this.form.userCheck
          }
        })
          .then((response) => {
            if (response.data.data[0] === false) {
              alert(response.data.msg)
            } else {
              this.id = response.data.data[1]
              this.$router.push('/ResetPassword/' + this.id)
            }
          })
          .catch(function (error) { console.log(error) })
      } else {
        alert('邮箱不能为空')
      }
    }
  }
}
</script>

<style lang="less" scoped>

.forgotpwd_container{
    .title {
      color: #fff;
      font-size: 30px;
      font-weight: bold;
      position: absolute;
      right: 50%;
      top: 10%;
      transform: translate(50%);
    }
    .img_bg {
        background: url("../assets/bgimg-dark.jpg");
        background-size: 100% 100%;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    // background-color: #eee;
    /* border-radius: 10px;
    margin: 0 25px 0 25px; */
    height: 100%;
}

.forgotpwd_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    // box-shadow: 0 0 10px #ccc;
}

.forgotpwd_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btn_nextStep {
    display: flex;
    justify-content: center;
}

h1 {
    color: #333;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content:center;
}

p {
    color: #666;
    font-size: 14px;
    display: flex;
    justify-content:center;
}
</style>
